<template>
    <view :style="{ height: statusBarHeight + 'px', backgroundColor: bgColor }"></view>
</template>

<script lang="ts">
import { ref, onMounted } from "vue";

export default {
    props: {
        bgColor: {
            type: String,
            default: 'transparent'
        }
    },
    setup() {
        const statusBarHeight = ref(0);

        onMounted(() => {
            // #ifdef APP-PLUS || MP-WEIXIN
            const systemInfo = uni.getSystemInfoSync();
            statusBarHeight.value = systemInfo.statusBarHeight || 0;
            // #endif

            // #ifdef MP-ALIPAY
            statusBarHeight.value =
                uni.getSystemInfoSync().statusBarHeight || 0;
            // #endif
        });

        return {
            statusBarHeight,
        };
    },
};
</script>

<style scoped>
view {
    width: 100%;
}
</style>
